<template>
  <div class="wrapper">
    <div class="table-box">
      <i-table
        :table="tableConfig"
        :tableData="tableData" 
        :page-bean="pageBean"
        @pageChange="pageChange"
      >
        <template slot="searchBox">
          <div class="topsearch">
            <div>
              <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="add">添加</el-button>
            </div>
            <!-- <div class="search">
              <el-input
                placeholder="输入组织名称进行查询"
                prefix-icon="el-icon-search"
                class="search-inp"
                v-model="queryCondition.keyword"
                size="small"
                clearable
              >
              </el-input>
              <el-button type="primary" size="small" @click="refreshTableData">搜索</el-button>
            </div> -->
          </div>
        </template>
        <template slot="type" slot-scope="props">
          <span>{{props.obj.row.type == 0 ? '单位' : '部门'}}</span>
        </template>
        <template slot="op" slot-scope="props">
          <el-button type="text" @click="edit(props.obj.row)">编辑</el-button>
          <el-button type="text" @click="del(props.obj.row.id)">删除</el-button>
          <el-button type="text" @click="addLower(props.obj.row.id)">添加下级</el-button>
        </template>
      </i-table>
    </div>


    <el-dialog title="添加组织及部门" :visible.sync="dialogVisible" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px" class="add-form">
        <el-form-item label="组织类型" prop="type">
          <el-radio-group v-model="form.type">
            <el-radio :label="0">单位</el-radio>
            <el-radio :label="1">部门</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="组织名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <template v-if="form.type == 0">
          <el-form-item label="单位logo" prop="logo">
            <img-upload :imgUrl="form.logo" @success="uploadSuccess" @remove="uploadRemove"></img-upload>
          </el-form-item>
          <el-form-item label="单位性质" prop="nature">
            <el-select v-model="form.nature" placeholder="请选择" style="width:300px">
              <el-option label="政府" value="政府"></el-option>
              <el-option label="央企" value="央企"></el-option>
              <el-option label="国企" value="国企"></el-option>
              <el-option label="私企" value="私企"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="form.nature != '政府'" label="单位角色" prop="dept_role">
            <el-select v-model="form.dept_role" placeholder="请选择" style="width:300px">
              <el-option label="建设" value="建设"></el-option>
              <el-option label="监理" value="监理"></el-option>
              <el-option label="总包" value="总包"></el-option>
              <el-option label="分包" value="分包"></el-option>
            </el-select>
          </el-form-item>
        </template>
        <el-form-item label="上级" prop="parentId">
          <tree-select :value="form.parentId" :props="{value: 'id',label:'name'}" :options="tableData" @getValue="getValue($event)" style="width:300px"></tree-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"  @click="submitForm" :loading="submitLoading">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import iTable from "@/components/table/table";
import { PageBean } from "@/utils/page-bean";
import imgUpload from "@/components/upload/upload"
import TreeSelect from '@/components/treeselect/index';
export default {
  components: { iTable,imgUpload,TreeSelect},
  data(){
    return{
      // 表格配置
      tableConfig: {},
      tableData: [],
      pageBean: new PageBean(10, 1, 0),
      queryCondition: {
        keyword:"",
      },
      dialogVisible:false,
      //from
      form:{
        type:0,  //模块ID，固定值
        name:"",
        logo:'',
        nature:"",
        deptRole:'',
        directorUid:'',
        directorPhone:"",
        parentId:0
      },
      rules: {
        parentId: [{ required: true, message: '请选择上级单位或部门', trigger: 'change' }],
        name: [{ required: true, message: '请输入组织名称', trigger: 'blur' }],
      },
      submitLoading:false,
      editId:''
    }
  },
  created(){
    this.initTable()
    this.refreshTableData()
  },
  methods:{
    // 初始化表格
    initTable() {
      this.tableConfig = {
        loading: false,
        hasSelect: false,
        hasIndex: false,
        hasOperation: false,
        hasSearch: true,
        hasPage: false,
        tr: [
          {
            label: "名称",
            minWidth: "200",
            prop: "name",
          },
          {
            label: "类别",
            minWidth: "100",
            prop: "type",
            show: "template",
          },
          {
            label: "负责人",
            minWidth: "120",
            prop: "directorName",
          },
          {
            label: "手机号",
            minWidth: "160",
            prop: "directorPhone",
          },
          {
            label: "操作",
            width: "220",
            prop: "op",
            show: "template",
          },
        ],
      };
    },
    //刷新表格数据
    refreshTableData(){
      this.tableConfig.loading = true;
      this.$api.getDeptTree().then(res => {
        if(res.code == 0){
          res.data.map(item => {
            item.id = item.deptId
          })
          this.tableData = res.data
          this.tableConfig.loading = false;
        }else{
          this.tableConfig.loading = false;
        }
      })
    },
    pageChange(pageBean) {
      this.queryCondition.current = pageBean.pageIndex;
      this.refreshTableData();
    },
    //提交
    submitForm(){
      this.$refs.form.validate(async (valid) => {
        if(valid){
          this.submitLoading = true
          let data = JSON.parse(JSON.stringify(this.form))
          let res = ''
          if(this.editId){
            data.deptId = this.editId
            res = await this.$api.editDept(data)
          }else{
            res = await this.$api.addDept(data)
          }
          if(res.code == 0){
            this.$message.success('操作成功')
            this.refreshTableData();
            this.dialogVisible = false
            this.submitLoading = false
          }else{
            this.$message.error(res.msg)
            this.submitLoading = false
          }
        }
      })
    },
    add(){
      for( let key in this.form ){
        this.form[key]= ''
      }
      this.form.type = 0
      this.form.parentId = 0
      this.dialogVisible = true
      this.editId = ''
    },
    addLower(id){
      for( let key in this.form ){
        this.form[key]= ''
      }
      this.form.type = 0
      this.form.parentId = id
      this.dialogVisible = true
      this.editId = ''
    },
    //编辑
    edit(row){
      this.$nextTick(()=>{
        for( let key in this.form ){
          this.form[key]=row[key]
        }
      })
      this.dialogVisible = true
      this.editId = row.deptId
    },
    //删除
    del(id){
      this.$confirm('确定删除该组织？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.delDept(id).then(res => {
          if(res.code == 0){
            this.$message.success('删除成功')
            this.refreshTableData()
          }else{
            this.$message.error(res.msg)
          }
        })
      })
    },
    uploadSuccess(file){
      this.form.logo = file.url
    },
    uploadRemove(){
      this.form.logo = ''
    },
    getValue(event){
      this.form.parentId = event
    },
  }
}
</script>

<style lang="scss" scoped>
.wrapper{
  display: flex;
  .org-list{
    width: 340px;
    margin-right: 20px;
    background: #fff;
    .bd{
      padding:10px 15px;
      height: calc(100vh - 118px);
      box-sizing: border-box;
      overflow-y: auto;
    }
  }
}
.table-box{
  flex: 1;
  padding:20px;
  background: #fff;
  overflow-x: auto;
}
.topsearch{
  display: flex;
  align-items: center;
  justify-content: space-between;
  .select{
    display: flex;
    align-items: center;
    label{
      font-size: 14px;
      color: #333;
      margin-right: 20px;
    }
  }
  .search-inp{
    width: 260px;
    margin-right: 20px;
  }
}
</style>